<template>
    <div>
      <div class="head">
        <div class="title">
          <span>生活便利</span>
        </div>
        <div class="show-more" @click="showMore">
          <span>查看所有 ></span>
        </div>
      </div>
      <div class="menu-list">
        <div v-for="(menu) in menus" :key="menu.name" class="menu" @click="showDetail">
          <div class="icon">
            <img class="menu-icon" :src="menu.url">
          </div>
          <div class="name">
            <span>
              {{ menu.name }}
            </span>
          </div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'homeLife',
    components: {
    },
    data () {
      return {
        menus: ''
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.$api.get('static/data.json', null, response => {
          this.menus = response.data.menuList
        })
      },
      showMore () {
        this.$router.push({name: 'life'})
      },
      showDetail () {
        this.$router.push({name: 'detail'})
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
@import "home-life.styl"
</style>
